<template>
  <div class="markdown">
    <h1>背景</h1>
    <a-row :gutter="20">
      <a-col :span="12">
        <MdPreview :show="false" desName="背景一">
          <template slot="code">
            <img :src="require('@/assets/images/background/vis_bg1.png')" width="100%">
          </template>
        </MdPreview>
        <MdPreview :show="false" desName="背景三">
          <template slot="code">
            <img :src="require('@/assets/images/background/vis_bg3.jpg')" width="100%">
          </template>
        </MdPreview>
        <MdPreview :show="false" desName="背景五">
          <template slot="code">
            <img :src="require('@/assets/images/background/vis_bg5.jpg')" width="100%">
          </template>
        </MdPreview>
      </a-col>
      <a-col :span="12">
        <MdPreview :show="false" desName="背景二">
          <template slot="code">
            <img :src="require('@/assets/images/background/vis_bg2.png')" width="100%">
          </template>
        </MdPreview>
        <MdPreview :val="demo4" :show="false" desName="背景四">
          <template slot="code">
            <div :style="{background: 'url(' + require('@/assets/images/background/vis_bg4.png') +') repeat', width: '100%', height: '350px'}"></div>
          </template>
        </MdPreview>
        <MdPreview :show="false" desName="背景六">
          <template slot="code">
            <img :src="require('@/assets/images/background/vis_bg6.png')" width="100%">
          </template>
        </MdPreview>
      </a-col>
    </a-row>
  </div>
</template>

<script>
export default {
    data() {
      return {
        demo4: `
<div :style="{background: 'url(' + require('@/assets/images/background/vis_bg4.png') +') repeat', width: '100%', height: '350px'}"></div>
        `
      }
    }
}
</script>

<style scoped>

</style>